<section class="demo-section">
  <h5>Validate a single element.</h5>
  <div>
    <d-select
      [options]="verifierOptions"
      [formControl]="singleSelectControl"
      [multiple]="true"
      [attr.name]="'planVerifier'"
      [filterKey]="'name'"
      [placeholder]="'Select'"
      [dValidateRules]="singleSelectRules"
    >
    </d-select>
  </div>
</section>

<section class="demo-section">
  <h5>Form Validate and Submit</h5>
  <d-toast [value]="msgs"></d-toast>
  <div>
    <form
      dForm
      [formGroup]="userFormGroup"
      [dValidateRules]="formRules.rule"
      [layout]="'vertical'"
      #userForm="dValidateRules"
      (dSubmit)="submitForm($event)"
    >
      <d-form-item>
        <d-form-label [required]="true" [hasHelp]="true" [helpTips]="'Enter a user name you like.'">UserName</d-form-label>
        <d-form-control>
          <input
            dTextInput
            autocomplete="off"
            name="username"
            formControlName="username"
            placeholder="Your name"
            [dValidateRules]="formRules.usernameRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Password</d-form-label>
        <d-form-control>
          <input
            dTextInput
            type="password"
            name="password"
            formControlName="password"
            placeholder="Enter a password of 6 to 15 characters"
            [dValidateRules]="formRules.passwordRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-item>
        <d-form-label [required]="true">Confirm Password</d-form-label>
        <d-form-control>
          <input
            dTextInput
            type="password"
            name="confirmPassword"
            formControlName="confirmPassword"
            placeholder="Confirm and enter"
            [dValidateRules]="formRules.confirmPasswordRules"
          />
        </d-form-control>
      </d-form-item>
      <d-form-operation>
        <d-button
          class="mr-element-spacing"
          [title]="userForm.errorMessage || ''"
          circled="true"
          style="margin-right: 8px"
          dFormSubmit
          [dFormSubmitData]="'register-button'"
          >Register</d-button
        >
        <d-button bsStyle="common" circled="true" dFormReset>Reset</d-button>
      </d-form-operation>
    </form>
  </div>
</section>
